<template>
  <div class="app-container">
    <el-container>
       <el-header  style="position:relative;">
        <h2 style="display: inline-block;">虚拟运营商引流</h2>
        <span style="margin:0 50px;">策略标识: </span>
        <span>规则号: </span>
        <el-button style="margin-left: 150px;" @click="enable">启用</el-button>
      </el-header>
      <el-main>
        <div class="condition">
          <p>引流条件</p>
          <div class="check">
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="来话"></el-checkbox>
              <el-checkbox label="去话"></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div class="region">
          <p>引流地区</p>
          <el-button type="primary" style="margin-left: 50px" @click="addFicttious">新增</el-button>
          <el-table :data="tableData" style="width: 85%; margin-left: 50px;">
            <el-table-column prop="wordCrown" label="字冠" align="center"></el-table-column>
            <el-table-column label="操作" width="200" align="center">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.row)">修改</el-button>
                <el-popconfirm
                  title="确定删除该字冠吗？"
                   @onConfirm="handleDeleteItem(scope.row)"
                >
                  <el-button size="mini" type="danger" slot="reference">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
    </el-container>
    <!-- 新增对话框 -->
    <el-dialog title="新增字冠" :visible.sync="addDialogVisible">
      <el-form :model="wordCrownForm">
        <el-form-item label="字冠名称" :label-width="formLabelWidth">
          <el-input v-model="wordCrownForm.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addFicttiousList">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改对话框 -->
    <el-dialog title="修改字冠" :visible.sync="editDialogVisible">
      <el-form :model="editwordCrownForm">
        <el-form-item label="字冠名称" :label-width="formLabelWidth">
          <el-input v-model="editwordCrownForm.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editDialogVisibleList">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import city from "../../enum/city";

export default {
  data() {
    return {
      isIndeterminate: false,
      checkAll: false,
      checkedCities: [],
      checkList: [],
      city,
      tableData: [
        {
          wordCrown: "170",
        },
        {
          wordCrown: "120",
        },
      ],
      addDialogVisible: false, //新增对话框
      editDialogVisible: false, //修改对话框
      deleteVisible: false, //删除
      wordCrownForm: {
        name: "",
      }, //新增内容
      editwordCrownForm: {
        name: "",
      }, //修改内容
      formLabelWidth: "120px",
    };
  },
  crerted() {
    console.log(this.city, "222");
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? city : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    //新增对话框
    addFicttious() {
      this.addDialogVisible = true;
    },
    //点击确定新增字冠
    addFicttiousList() {
      this.addDialogVisible = false;
    },
    //修改对话框打开
    handleEdit(row) {
      this.editDialogVisible = true;
    },
    //修改字冠
    editDialogVisibleList() {
      this.editDialogVisible = false;
    },
    //删除字冠
    handleDeleteItem() {

    },
    //点击启用
    enable() {

    }
  },
};
</script>

<style lang="less" scoped>
.condition {
  width: 100%;
  height: 150px;
  border: 2px solid #409eff;
  p {
    font-size: 18px;
    font-weight: 500;
    margin-left: 20px;
    color: #1736a2;
  }
  .check {
    margin: 40px 40px;
  }
}
.region {
  width: 100%;
  height: 100%;
  border: 2px solid #409eff;
  margin-top: 50px;
  padding-bottom: 10px;
  p {
    font-size: 18px;
    font-weight: 500;
    margin-left: 20px;
    color: #1736a2;
  }
}
.el-checkbox {
  margin: 10px 20px;
}
.el-checkbox-group {
  margin-top: -16px;
}
.el-button--mini {
  margin: 0 10px;
}
</style>
